<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg">
<div class="columns pull-right">
	<button class="btn btn-success" onclick="reLoad()">查询</button>
</div>
<div class="columns pull-right col-md-2 nopadding">
	<input id="searchName" onkeyup="if(event.keyCode==13) {reLoad()}" type="text" class="form-control"
		   placeholder="名字">
</div>
<div class="columns pull-right col-md-2 nopadding">
	<!--<input id="search_input"  type="text" class="form-control"

           placeholder="名字">
    </div>-->

	<div class="wrapper wrapper-content animated fadeInRight">
		<input id="id" name="id" th:value="${userId}"
			   type="hidden">

		<div class="row">

			<div class="col-sm-12">

				<div class="ibox-content">
					<div id="deptTree"></div>
				</div>
				<div class="form-group hidden">
					<div class="col-sm-12 col-sm-offset-12">
						<button type="submit" class="btn btn-primary">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div th:include="include :: footer"></div>


<script type="text/javascript">
	var id = $("#id").val();
	var searchName = $("#searchName").val();

	$(document).ready(function() {
		getTreeData(id)
	});

	function getTreeData(id,searchName) {
		$.ajax({
			type : "GET",
			url : "/wx/memberUser/tree/"+id+"&"+searchName,
			success : function(tree) {

				loadTree(tree);
			}
		});
	}
	function loadTree(tree) {

		$('#deptTree').jstree({
			'core' : {
				'data' : tree

			},
			"plugins" : [ "search" ]
			//"plugins" : [ "search", "state", "types", "wholerow","checkbox" ]
		});

		$('#deptTree').jstree().open_all();
		$('#deptTree').jstree(true).refresh(); // 刷新树
		$('#deptTree').on("changed.jstree", function(e, data) {

			/*if(data.node.id!=-1){*/
			parent.loadDept(data.node.id,data.node.text);
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
			/*}*/

		});

	}
	$('#deptTree').on("ready.jstree", function(e, data) {
		$('#deptTree').jstree().close_all()

	})
	/*$('#deptTree').on("changed.jstree", function(e, data) {
        console.log("..................")
        if(data.node.id!=-1){
            parent.loadDept(data.node.id,data.node.text);
            var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
            parent.layer.close(index);
        }

    });*/

	$('#search_input').keyup(function() {
		/*$('#deptTree').show();

        $('#deptTree').jstree('search', $(this).val());*/
		$('#deptTree').jstree(true).show_all();
		$('#deptTree').jstree('search', $(this).val());
	});

	/*var to = false;
    $('#search_input').keyup(function () {
        if(to) {
            clearTimeout(to);
        }

        to = setTimeout(function () {
            $('#deptTree').jstree(true).search($('#search_input').val());

        }, 250);
    });*/

	function reLoad() {

		//$('#deptTree').jstree(true).refresh(); // 刷新树
		var id = $("#id").val();
		var searchName = $("#searchName").val();
		$('#deptTree').jstree(true).destroy();// 清除树节点
		// 重新设置树的JSON数据集
		getTreeData(id,searchName);



	}

</script>
</body>

</html>
